@font-face {
  font-family: 'icomoon';
  src: url('../font/icomoon.ttf?3b2ao5') format('truetype');
  font-weight: normal;
  font-style: normal
}

body {
  background: #121F26;
  color: #FFF;
  font-family: 'Armata', sans-serif;
  font-size: 16px;
  letter-spacing: .08em;
}

a {
  color: #FFFFFF;
  text-decoration: none;
}

p {
  margin: 0 0 22px;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-upper {
  text-transform: uppercase;
}

/* header */
.your-header {
  padding-top: 20px;
  padding-bottom: 20px;
}

.your-header a {
  color: #FFFFFF;
}

.your-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 63px;
  margin-left: 330px;
}

.your-logo {
}

.your-logo a {
  display: flex;
  align-items: center;
  font-family: 'Pacifico', handwriting;
  font-size: 26px;
  line-height: 1;
  white-space: nowrap;
}

.your-logo img {
  max-height: 45px;
  display: inline-block;
  vertical-align: middle;
}

.your-logo img + span {
  margin-left: 10px;
}

.your-nav {
  display: flex;
  align-items: center;
  margin: 0 -15px;
}

.your-nav a {
  padding: 10px 0;
  margin: 0 15px;
  font-size: 1.133em;
  font-weight: 700;
  color: #757575;
}

.your-nav a.active {
  color: #FFFFFF;
}

/* container */
.your-container {
  max-width: 1196px;
  width: 100%;
  margin: 0 auto;
  display: flex;
}

.your-container-sm {
  flex: 1;
}

.pager-layers {
  margin-bottom: 15px;
}

.pager-layers h1, h2, h3, h4, h5, h6 {
  font-family: 'Aldrich', sans-serif;
}

.pager-layers .pager {
  background-color: #313C42;
  border: 1px solid #2C363B;

}

.pager-layers .title-lg {
  font-weight: 700;
  font-size: 30px;
  margin-top: 0;
  margin-bottom: 50px;
}

.pager-cont {
  padding: 40px 20px;
}

.padd-box {
  margin-left: 3.4%;
  margin-right: 3.4%;
}

/* pager about */

.share-btn {
  border: 2px solid #1FA184;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 25px;
  border-radius: 35px;
  cursor: pointer;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: top;
  display: inline-block;
}

.share-btn span {
  margin-right: .4em;
  font-family: 'icomoon' !important;
}

.share-btn .icon-share:before {
  content: "\f1e0";
}

/* pager skills */
#skills {
  display: flex;
  border-bottom: 1px solid #2C363B;
  padding-bottom: 20px;
  margin-left: 3.4%;
  margin-right: 3.4%;
  margin-bottom: 30px;
}

#skills .skills-item {
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
}

#skills h3 {
  margin-top: 0;
  color: #757575;
  font-size: 1.35em;
  font-weight: 400;
  margin-bottom: 1.571em;
  font-family: 'Aldrich', sans-serif;
  line-height: 1.1;
}

#skills .info {
  font-size: .9em;
  letter-spacing: .01em;
}

#skills .info .info-item {
  display: flex;
  margin: 0 0 .563em;
}

#skills .info .info-item .left {
  font-size: .9em;
  font-weight: 700;
  width: 100px;
}

#skills .info .info-item .right {
  padding-left: 12px;
}

#skills .progress-bullets {
  margin-bottom: 1.375em;
}

#skills .progress-bullets .progress-title {
  font-weight: 700;
  font-size: .85em;
  line-height: 1.2em;
  display: block;
  margin-bottom: .7em;
}

#skills .progress-bullets .progress-bar {
  position: relative;
  line-height: .938em;
}

#skills .progress-bullets .bullet {
  border: 2px solid #1FA184;
  margin-right: .1em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

#skills .progress-bullets .bullet.fill {
  background-color: #1FA184;
}

#skills .progress-bullets .progress-text {
  font-size: .8em;
  line-height: .938em;
  color: #757575;
}

#data {
  display: flex;
  /*border-bottom: 1px solid #2C363B;*/
  padding-bottom: 20px;
  margin-left: 3.4%;
  margin-right: 3.4%;
  /*margin-bottom: 30px;*/
}

#data .data-item {
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
}

#data h3 {
  margin-top: 0;
  color: #757575;
  font-size: 1.35em;
  font-weight: 400;
  margin-bottom: 1.571em;
  font-family: 'Aldrich', sans-serif;
  line-height: 1.1;
}

#data .progress-line {
  margin-bottom: 20px;
}

#data .progress-line .progress-title {
  padding-right: 3.8em;
  font-weight: 700;
  font-size: .85em;
  line-height: 1.2em;
  display: block;
  margin-bottom: .7em;
}

#data .progress-line .progress-bar {
  width: 100%;
  height: 5px;
}

#data .progress-line .progress-text {
  top: -25px;
  right: 0px;
  color: inherit;
  position: absolute;
  margin: 0px;
  padding: 0px;
  transform: translate(0px, 0px);
}

#data .progress-chart-wrapper {
  display: flex;
  justify-content: space-between;
}

#data .progress-chart {
  text-align: center;
  display: inline-block;
}

#data .progress-chart .progress-bar {
  height: 93px;
  width: 93px;
  margin: 0 auto;
  position: relative;
}

#data .progress-chart .progress-text {
  top: 50%;
  left: 50%;
  color: inherit;
  position: absolute;
  margin: 0px;
  padding: 0px;
  transform: translate(-50%, -50%);
}

#data .progress-chart .progress-title {
  margin-top: 10px;
  font-size: .85em;
  line-height: 1.2em;
  display: block;
  margin-bottom: .7em;
  font-weight: 700;
}

/* work experience */
#exp {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #2C363B;
}

.education {
  margin-left: 210px;
  position: relative;
}

.education:before {
  top: 10px;
  left: 0;
  bottom: 0;
  width: 2px;
  content: '';
  opacity: .5;
  position: absolute;
  background-color: #1FA184;
}

.education-box {
  position: relative;
  padding-left: 20px;
  margin-bottom: 45px;
  padding-right: 90px;
}

.education-box:before {
  content: "";
  top: 10px;
  left: -1px;
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #FFF;
}

.education-box:last-child:after {
  top: 14px;
  left: 0;
  bottom: 0;
  width: 2px;
  content: '';
  position: absolute;
  background-color: #313C42;
}

.education-date {
  margin-left: 0;
  margin-right: 22px;
  padding: 8px 6px;
  font-size: .875em;
  text-align: center;
  position: absolute;
  width: 160px;
  right: 100%;
  left: auto;
  top: -4px;
  letter-spacing: 0;
  line-height: 1.1;
  display: inline-block;
  background-color: #1FA184;
}

.education-date span {
  overflow: hidden;
  position: relative;
  display: block;
  white-space: nowrap;
}

.education-date:after {
  content: "";
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  position: absolute;
  border-top: 16px solid transparent!important;
  border-bottom: 16px solid transparent!important;
  border-right: 10px solid transparent!important;
  border-left: 10px solid #1FA184;
}

.education-box h3 {
  font-size: 20px;
  margin-bottom: 22px;
  margin-top: 0;
  line-height: 1.1;
}

.education-logo {
  margin-bottom: 10px;
}

.education-company {
  color: #757575;
  line-height: 1.1;
  letter-spacing: 0;
  font-size: 1em;
  margin-bottom: 15px;
  display: inline-block;
}

.education-box p {
  font-size: .875em;
}

#portfolio {

}

.pf-filter button {
  color: #FFF;
  opacity: .54;
  font-size: 18px;
  font-weight: 600;
  line-height: 27px;
  margin: 0 40px 0 0;
  border: 0;
  padding: 0;
  background: 0 0;
  transition: color .2s ease-out;
  cursor: pointer;
}

.pf-filter button.active, .pf-filter button:hover {
  opacity: 1;
}

#interests {
  padding-bottom: 20px;
}

#interests ul {
  line-height: 1.1em;
  padding-left: 0;
  list-style: none;
}

#interests .icon-list .row {
  display: flex;
}

#interests .icon-list .row .item {
  flex: 1;
  display: flex;
  align-items: center;
}

#interests span {
  font-family: 'icomoon' !important;
  color: #1FA184;
  font-size: 1.7em;
  margin-right: 10px;
}

.icon-animal-lover:before {
  content: "\e912";
}

.icon-island:before {
  content: "\e913";
}

.icon-bicycle:before {
  content: "\e931";
}

.icon-party:before {
  content: "\e938";
}

.icon-magic:before {
  content: "\f0d0";
}

.icon-coffee:before {
  content: "\f0f4";
}

#wisdom {

}

#wisdom .togglebox {
  list-style: none;
  margin: 22px 0;
  padding: 0;
}

.togglebox>li {
  margin-bottom: 5px;
}

.togglebox-header {
  color: #FFF;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  padding: 10px;
  transition: background-color .15s linear 0s;
  position: relative;
  background-color: #1FA184;
  transition: opacity .2s ease-out;
  border-radius: 4px;
}

/* sidebox */
.sidebox {
  margin-right: 40px;
  width: 290px;
  box-shadow: -4px 7px 15px 1px rgba(0, 0, 0, .2);
  height: fit-content;
}

.widget-card {
  padding: 30px 20px 20px;
  background-color: #1FA184;
  text-align: center;
  color: #FFF;
}

.card-avatar img {
  width: 195px;
  height: 195px;
  border-radius: 50%;
  vertical-align: middle;
}

.card-info {
  margin-top: 33px;
}

.card-info h2 {
  font-size: 1.625em;
  margin-top: 0;
  margin-bottom: .688em;
}

.card-info p {
  margin-top: 0;
  color: inherit;
  opacity: .65;
  font-size: 1.143em;
}

.social-list a {
  margin: 5px 12px;
}

.social-list a img {
  width: 20px;
  height: 20px;
}

.widget-text {
  background-color: #313C42;
  padding: 50px 20px;
  text-align: center;
}

.widget-text .link {
  color: #000;
  background-color: #DEC746;
  font-size: 15px;
  padding: 12px 35px;
  border-radius: 35px;
  border: 2px solid transparent;
  font-weight: 700;
}

/* nav scroll */
.nav-scroll {
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-scroll .nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-scroll .nav-list a {
  padding: 10px 0;
}

.nav-scroll .nav-list span {
  font-family: 'icomoon' !important;
  font-size: 28px;
  line-height: 42px;
}

.nav-scroll .nav-img {
  padding: 10px 0;
}

.nav-scroll .nav-img img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.nav-scroll .icon-contact:before {
  content: "\e904";
}

.nav-scroll .icon-blog:before {
  content: "\e905";
}

.nav-scroll .icon-references:before {
  content: "\e901";
}

.nav-scroll .icon-experience:before {
  content: "\e903";
}

.nav-scroll .icon-portfolio:before {
  content: "\e902";
}

/* footer */
.your-footer {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.your-footer .your-container-sm {
  margin-left: 330px;
}

/* button up */

.your-btn-up {
  right: 20px;
  bottom: 20px;
  position: fixed;
  width: 50px;
  height: 50px;
  /*display: none;*/
  color: #FFF;
  background-color: #1FA184;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  outline: none;
}

.icon-arrow-page-up {
  font-size: 32px;
  font-family: 'icomoon' !important;
}

.icon-arrow-page-up:before {
  content: "\e906";
}

/* svg */

#yourBgShape1, #yourBgShape2 {
  top: 0;
  position: fixed;
  z-index: -1;
}

#yourBgShape1 {
  left: 0;
}

#yourBgShape1 polygon {
  fill: #0F171B;
}

#yourBgShape2 {
  top: -100px;
  right: -100px;
}

#yourBgShape2 polygon {
  fill: #1FA184;
}
